<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Show polygon information on click</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script src="../../lib/mapbox-gl.js"></script>
    <link href="../../lib/mapbox-gl.css" rel="stylesheet" />
    <script src="../../lib/axios.min.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
      .mapboxgl-popup {
        max-width: 400px;
        font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      let baseDataUrl = `http://${localStorage.getItem(
        "host"
      )}/mapbox-gl-js-offline-examples`;
      axios
        .get(
          baseDataUrl +
            `/resources/styles/${localStorage.getItem(
              "mbtilesStylesName"
            )}.json`
        )
        .then((res) => {
          let data = res.data;
          initMap(data);
        })
        .catch((err) => {
          console.error(err);
        });

      function initMap(style) {
        let map = new mapboxgl.Map({
          container: "map",
          center: [-100.04, 38.907],
          zoom: 3,
          style: style,
        });

        map.on("load", function () {
          // Add a source for the state polygons.
          map.addSource("states", {
            type: "geojson",
            data:
              baseDataUrl +
              "/data/geojson/ne_110m_admin_1_states_provinces_shp.geojson",
          });

          // Add a layer showing the state polygons.
          map.addLayer({
            id: "states-layer",
            type: "fill",
            source: "states",
            paint: {
              "fill-color": "rgba(200, 100, 240, 0.4)",
              "fill-outline-color": "rgba(200, 100, 240, 1)",
            },
          });

          // When a click event occurs on a feature in the states layer, open a popup at the
          // location of the click, with description HTML from its properties.
          map.on("click", "states-layer", function (e) {
            new mapboxgl.Popup()
              .setLngLat(e.lngLat)
              .setHTML(e.features[0].properties.name)
              .addTo(map);
          });

          // Change the cursor to a pointer when the mouse is over the states layer.
          map.on("mouseenter", "states-layer", function () {
            map.getCanvas().style.cursor = "pointer";
          });

          // Change it back to a pointer when it leaves.
          map.on("mouseleave", "states-layer", function () {
            map.getCanvas().style.cursor = "";
          });
        });
      }
    </script>
  </body>
</html>
